<template>
  <el-dialog :visible="value" :before-close="cancel">
    <template slot="title">
      解禁账号
    </template>
    <div class="content">
      <p>账号：{{rowData.target_account}}</p>
      <p>禁言开始时间：{{rowData.time}}</p>
      <p>禁言结束时间：{{rowData.expire}}</p>
      <p v-if="showTime">当前还剩：{{timeFormat(rowData.expire)}}，确定要解禁吗？</p>
      <p v-else>禁言时间到，系统已自动解禁</p>
    <el-form :model="unbanForm" ref="refForm" v-if="showTime" >
      <el-form-item label="备注：" prop="remark">
        <el-col :span="16">
        <el-input type="textarea" :rows="4" v-model="unbanForm.remark"></el-input>
        </el-col>
      </el-form-item>
    </el-form>
    </div>
    <div slot="footer" class="dialog-footer" v-if="showTime">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit('refForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { form } from '@/build';
import { postUserUnBan } from '@/services/api/chatRoom';

export default {
  name: 'unBan-dialog',
  props: ['value', 'rowData'],
  mixins: [form],
  data() {
    return {
      showTime: true,
      unbanForm: {
        uid: this.$store.state.user.userInfo.userId,
        account: this.$store.state.user.userInfo.username,
        target_type: this.rowData.target_type,
        target_uid: this.rowData.target_uid,
        target_account: this.rowData.target_account,
        target_nick: this.rowData.target_nick,
        remark: undefined,
      },
    };
  },
  methods: {
    cancel() {
      this.$emit('cancel');
    },
    timeFormat(value) {
      const stime = new Date().getTime();
      const etime = new Date(value).getTime();
      if (stime >= etime) {
        this.showTime = false;
        return false;
      }
      const usedTime = etime - stime; // 两个时间戳相差的毫秒数
      const days = Math.floor(usedTime / (24 * 3600 * 1000));
      // 计算出小时数
      const leave1 = usedTime % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
      const hours = Math.floor(leave1 / (3600 * 1000));
      // 计算相差分钟数
      const leave2 = leave1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
      const minutes = Math.floor(leave2 / (60 * 1000));

      const leave3 = leave2 % (60 * 1000);// 计算分钟数后剩余的毫秒数
      const second = Math.floor(leave3 / 1000);
      const time = `${days}天${hours}时${minutes}分${second}秒`;
      // if (days < 0 || hours < 0 || minutes < 0) {
      //   this.showTime = false;
      // }
      // if (days == 0 && hours == 0 && minutes == 0) { this.showTime = false; }

      return time;
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.doSave({ action: 'saveForm', form: formName });
          this.cancel();
        } else {
          return false;
        }
      });
    },
  },
  mounted() {
    this.bindSave(postUserUnBan, 'saveForm', 'unbanForm', {
      afterSuccess: ([result, data]) => {
        if (result) {
          this.$parent.getAll();
        }
        return data;
      },
    });
  },
};
</script>

<style scoped>
.content{
  margin:-20px 20px 0 ;
}
</style>
